import { Table, Form, Input, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { allShopApi } from '../../apis/menuApi';
import { DataType } from '../../types/user';
import FormData from '../../utils/FormData';

const { Option } = Select;

export default function user() {
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(Number);
  const [rowId, setRowId] = useState({});
  const [reviseList, setReviseList] = useState({});
  const [updateForm] = Form.useForm();

  //调用生命周期
  useEffect(() => {
    userData(1, 10);
  }, []);
  useEffect(() => {
    // console.log(reviseList);
  }, [reviseList]);
  //发送请求获取菜单数据
  const userData = async (page: number, pageSize: number) => {
    const data = {
      pageSize: pageSize,
      pageNum: page,
    };
    const res = await allShopApi(FormData(data));
    console.log(res);
    res.rows.map((item: any, index: number) => {
      return (item.key = item.userId);
    });
    setTotal(res.total);
    setData(res.rows);
  };

  // 表格单选框
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
      setRowId(selectedRowKeys);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.username === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '商铺名称',
      dataIndex: 'shopName',
      key: 'shopName',
      align: 'center',
      width: '80px',
      sorter: true,
    },
    {
      title: '信誉积分',
      dataIndex: 'prestige',
      key: 'prestige',
      align: 'center',
      width: '80px',
    },
    {
      title: '商铺状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: '100px ',
    },
    {
      title: '电话',
      dataIndex: 'account',
      key: 'account',
      align: 'center',
      width: '100px',
    },
    {
      title: '商铺类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '100px',
    },
    {
      title: '门店详情',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: '100px',
    },
    {
      title: '查看警告',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: '100px',
    },
    {
      title: '警告',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: '100px',
    },
    {
      title: '下架',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: '100px',
    },
  ];

  return (
    <div>
      {/* 页面查看 */}
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }}>
        <Form.Item name="note" label="用户名">
          <Input />
        </Form.Item>
        <Form.Item name="gender" label="部门">
          <Select>
            <Option value="male">male</Option>
            <Option value="female">female</Option>
            <Option value="other">other</Option>
          </Select>
        </Form.Item>
      </Form>

      <Table
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
        scroll={{ x: 'calc(700px + 50%)', y: 480 }}
        pagination={{
          total: total,
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: [10, 20, 30, 40, 50],
          onChange: userData,
        }}
      />
    </div>
  );
}
